import { FC, useState } from 'react';
import { Typography, Button, message } from 'antd';
import { MessageOutlined } from '@ant-design/icons';
import ReactMarkdown from 'react-markdown';
import remarkBreaks from 'remark-breaks';
// import { useNavigate } from 'react-router-dom';

import { Report } from '../../types';
import FeedbackModal from '../FeedbackModal';
import styles from './index.module.css';

interface ReportContentProps {
  report: Report;
}

const ReportContent: FC<ReportContentProps> = ({ report }) => {
  const [feedbackVisible, setFeedbackVisible] = useState(false);
  // const navigate = useNavigate();

  const handleFeedback = (type: string) => {
    // TODO: 实现反馈提交逻辑
    console.log('Feedback submitted:', type);
    setFeedbackVisible(false);
    message.success('反馈提交成功');
  };

  // const handleSave = () => {
  //   navigate(`/report/detail/${report.id}`);
  // };

  return (
    <div className={styles.report}>
      <Typography.Title
        level={2}
        style={{ marginBottom: 20, textAlign: 'center' }}
      >
        {report.title}
      </Typography.Title>

      <div className={styles.section}>
        <ReactMarkdown remarkPlugins={[remarkBreaks]}>
          {report.content}
        </ReactMarkdown>
      </div>

      {/* <div className={styles.section}>
        <Title level={3}>摘要</Title>
        <Paragraph>{report.summary}</Paragraph>
      </div>

      <Divider />

      <div className={styles.section}>
        <Title level={3}>详细内容</Title>
        <div>{report.content}</div>
      </div>

      <Divider />

      <div className={styles.section}>
        <Title level={3}>参考文献</Title>
        <ul>
          {report.references?.map((ref, index) => (
            <li key={index}>
              <Text>{ref}</Text>
            </li>
          ))}
        </ul>
      </div> */}

      <div className={styles.feedbackButton}>
        {/* <Button
          type="primary"
          icon={<SaveOutlined />}
          onClick={handleSave}
          style={{ marginRight: 8 }}
        >
          保存
        </Button> */}
        <Button
          type="primary"
          icon={<MessageOutlined />}
          onClick={() => setFeedbackVisible(true)}
        >
          反馈
        </Button>
      </div>

      <FeedbackModal
        visible={feedbackVisible}
        onClose={() => setFeedbackVisible(false)}
        onSubmit={handleFeedback}
      />
    </div>
  );
};

export default ReportContent;
